<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>滚动加载</title>
	<link rel="stylesheet" href="css/vue-scroll.css">
	<script src="js/jquery-1.11.2.min.js"></script>
	<script src="js/iscroll.js"></script>
	<script src="js/vue.js"></script>
</head>
<body>
	<h1 style="text-align: center">滚动加载</h1>
	<div id="wrapper" v-cloak>
		<ul>
			<img class="loading" src="images/scroll/loading.svg" v-if="static == 1">
			<img class="success" src="images/scroll/success.svg" v-if="static == 2">
			<img class="before" src="images/scroll/before.svg" v-if="static == 0">
			<li v-for="li in list">{{li.user.username}}</li>
		</ul>
	</div>
	<script>
	var myscroll;
	//是否正在加载中	true表示正在加载  false表示没有加载
	var is_r = false;
	var pageNo = 1;
	window.onload = function(){
		setTimeout(function(){
			myscroll = new iScroll("wrapper",{
				topOffset: 0,
				//上拉时触发
				onScrollMove: function(){
					w.static = 0;
					//如果上拉高度 大于 (内容高度 - wrapper高度) 50px 以上  且是未刷新状态时触发 ;
                    myscroll.refresh()
					if(this.y <= ( this.wrapperH - this.scroller.clientHeight -50) && is_r == false){
						//正在加载状态
						is_r = true;
						setTimeout(function(){
							//这里表示数据加载成功后
                            var type = null;
                            var search =null;
                            var _this = w;
                            $.get(quark_posts_get_api, {
                                type: type,
                                search: search,
                                pageNo: ++pageNo,
                                length: _this.totalNumber,
                            }, function (data) {
                                var len = data.data.length;
                                for (var i = 0;i<len;i++){
                                    w.list.push(data.data[i]);
                                }
                            });
                            // for (var i = 0;i<20;i++){
                            //     w.list.push({user:{username:123}});
                            // }
							//这里表示渲染完成后刷新wrapper
							setTimeout(function(){
								console.log("刷新wrapper");
								//显示加载成功状态图标 (没有更多数据时候的提示作用)
								w.static = 2;
								setTimeout(function(){
									w.static = "";
								},500)
								//加载完成状态
								is_r = false;

							},0)
						},2000);
					}
				},
				onScrollEnd: function(){
					//上拉之后如果触发刷新则 状态图标值为1 显示loading状态

					if(is_r == true){
						w.static = 1;
					}
				}
			});
		},0);
	}

	</script>
	<script src="js/vue-scroll.js"></script>
	<!--<script>-->
        <!--var myscroll;-->
        <!--function loaded() {-->
            <!--myScroll = new iScroll('wrapper', {-->
                <!--fixedScrollbar: true, hideScrollbar: true, fadeScrollbar: true, mouseWheel: true, snap: true,-->
                <!--onBeforeScrollStart: function (e) {-->
                    <!--var target = e.target;-->
                    <!--while (target.nodeType != 1) target = target.parentNode;-->
                    <!--if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') {-->
                        <!--e.preventDefault();-->
                    <!--}-->
                <!--},-->
                <!--onBeforeScrollMove: function (e) {-->
                    <!--e.preventDefault();-->
                <!--},-->
                <!--onScrollEnd: function (e) {-->
                    <!--var resultH = $("#wrapper").height();-->
                    <!--$("#wrapper").css("height", resultH);-->
                    <!--setTimeout(function () {-->
                        <!--myScroll.refresh();-->
                        <!--myScroll.options.snap = true;-->
                    <!--}, 100);-->
                <!--}-->
            <!--},120);-->
        <!--}-->

        <!--window.addEventListener("load", loaded, true);-->
        <!--document.addEventListener('touchmove', function (e) { e.preventDefault(); }, true);-->
        <!--document.addEventListener('DOMContentLoaded', allowFormsInIscroll, false);-->

        <!--function allowFormsInIscroll() {-->
            <!--[].slice.call(document.querySelectorAll('input, select, button')).forEach(function (el) {-->
                <!--el.addEventListener(('ontouchstart' in window) ? 'touchstart' : 'mousedown', function (e) {-->
                    <!--e.stopPropagation();-->
                <!--})-->
            <!--})-->
        <!--}-->

	<!--</script>-->
</body>
</html>